<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML 
xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>jQuery Alert Dialogs</TITLE>
<META http-equiv=Content-Type content=text/html;charset=UTF-8>
<META content="This is a demonstration page." name=description>
<META content="alert, confirm, prompt, demo" name=keywords>
<STYLE type=text/css>BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
HTML {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY {
	PADDING-RIGHT: 15px; PADDING-LEFT: 15px; FONT-SIZE: 12px; BACKGROUND: #fff; PADDING-BOTTOM: 15px; PADDING-TOP: 15px; FONT-FAMILY: Arial, Helvetica, sans-serif
}
H1 {
	FONT-WEIGHT: normal; FONT-SIZE: 20px
}
H2 {
	FONT-WEIGHT: normal; FONT-SIZE: 16px
}
FIELDSET {
	BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 2em; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 2em; PADDING-BOTTOM: 1em; MARGIN: 1em 0em; BORDER-LEFT: #ccc 1px solid; PADDING-TOP: 1em; BORDER-BOTTOM: #ccc 1px solid; -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px
}
LEGEND {
	PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 16px; PADDING-BOTTOM: 0em; COLOR: #666; PADDING-TOP: 0em
}
PRE {
	PADDING-RIGHT: 1em; PADDING-LEFT: 1em; FONT-SIZE: 11px; BACKGROUND: #f8f8f8; PADDING-BOTTOM: 1em; COLOR: #666; PADDING-TOP: 1em; FONT-FAMILY: "Courier New", monospace; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px
}
.style_1#popup_container {
	BORDER-LEFT-COLOR: #113f66; BACKGROUND: #005294; BORDER-BOTTOM-COLOR: #113f66; COLOR: #a4c6e2; BORDER-TOP-COLOR: #113f66; FONT-FAMILY: Georgia, serif; BORDER-RIGHT-COLOR: #113f66
}
.style_1#popup_container #popup_title {
	BORDER-RIGHT: #005294 1px solid; BORDER-TOP: #005294 1px solid; PADDING-LEFT: 1em; FONT-WEIGHT: normal; BACKGROUND: #76a5cc; BORDER-LEFT: #005294 1px solid; COLOR: #fff; BORDER-BOTTOM: #005294 1px solid; TEXT-ALIGN: left
}
.style_1#popup_container #popup_content {
	BACKGROUND: none transparent scroll repeat 0% 0%
}
.style_1#popup_container #popup_message {
	PADDING-LEFT: 0em
}
.style_1#popup_container INPUT[type='button'] {
	BORDER-RIGHT: #76a5cc 2px outset; BORDER-TOP: #76a5cc 2px outset; BACKGROUND: #3778ae; BORDER-LEFT: #76a5cc 2px outset; COLOR: #a4c6e2; BORDER-BOTTOM: #76a5cc 2px outset
}
</STYLE>
<!-- Dependencies -->
<SCRIPT src="jquery.js" type=text/javascript></SCRIPT>
 
<SCRIPT src="jquery.ui.draggable.js" type=text/javascript></SCRIPT>
<!-- Core files -->
<SCRIPT src="jquery.alerts.js" type=text/javascript></SCRIPT>
<LINK media=screen href="jquery.alerts.css" type=text/css rel=stylesheet>
<!-- Example script -->
<SCRIPT type=text/javascript>
			$(document).ready( function() {
				
				$("#alert_button").click( function() {
					jAlert('This is a custom alert box', 'Alert Dialog');
				});
				
				$("#confirm_button").click( function() {
					jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
						jAlert('Confirmed: ' + r, 'Confirmation Results');
					});
				});
				
				$("#prompt_button").click( function() {
					jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
						if( r ) alert('You entered ' + r);
					});
				});
				
				$("#alert_button_with_html").click( function() {
					jAlert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <u>underline</u>!');
				});
				
				$(".alert_style_example").click( function() {
					$.alerts.dialogClass = $(this).attr('id'); // set custom style class
					jAlert('This is the custom class called &ldquo;style_1&rdquo;', 'Custom Styles', function() {
						$.alerts.dialogClass = null; // reset to default
					});
				});
			});
			
		</SCRIPT>
 
<META content="MSHTML 6.00.6000.17063" name=GENERATOR></HEAD>
<BODY>
<H1> jQuery弹出警告对话框美化插件（警告，确认和提示）</H1>
<H2>Basic Examples</H2>
<FIELDSET><LEGEND>Alert</LEGEND><PRE>jAlert('This is a custom alert box', 'Alert Dialog');</PRE>
<P><INPUT id=alert_button type=button value="Show Alert"> </P></FIELDSET> 

<FIELDSET><LEGEND>Confirm</LEGEND><PRE>
jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
    jAlert('Confirmed: ' + r, 'Confirmation Results');
});
</PRE>
<P><INPUT id=confirm_button type=button value="Show Confirm"> </P></FIELDSET> 

<FIELDSET><LEGEND>Prompt</LEGEND>
<PRE>jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
    if(r) alert('You entered ' + r);
});
</PRE>
<P><INPUT id=prompt_button type=button value="Show Prompt"> </P></FIELDSET> 

<H2>Additional Examples</H2>
<FIELDSET><LEGEND>With HTML</LEGEND><PRE>jAlert('You can use HTML, such as <STRONG>bold</STRONG>, <EM>italics</EM>, and <U>underline</U>!');
</PRE>
<P><INPUT id=alert_button_with_html type=button value="Show Alert"> 
</P></FIELDSET> 

<FIELDSET><LEGEND>Alternate Styles</LEGEND>
<P>By changing the value of the <SAMP>$.alerts.dialogClass</SAMP> property (and 
creating your own CSS class), you can changes the style of your dialogs: </P>
<P><INPUT class=alert_style_example id=style_1 type=button value="Style 1"> </P>
<P>View the plugin source for additional properties that can be modifed at 
runtime. </P></FIELDSET> 

</BODY></HTML>
